<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子组件向父组件中传递参数</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
       1.父组件向子组件传递参数时  可以在子组件中使用props接收 组件标签中传递进来的参数  props是单向数据流 只能接收参数
       2. 子组件向父组件中传递参数    可以将父组件中定义的函数传入子组件  @事件名="父组件中的函数"  在子组件中调用父组件传递进来的函数
          将参数通过函数的形参传递给父组件

-->
<div id="app">
    <h3>学生总人数是:{{total}}</h3>
    <!--    使用组件 向组件内部传递一个函数  实现子组件向父组件进行参数的传递-->
    <student @total="totalnumber"></student>
</div>
<script>


    //定义组件
    const student = {
        template: `
                <div>
                    <div  v-for="student  in  students" style="border: 1px solid red;width: 300px;height: 200px; text-align: center;margin-top: 10px">
                        <h3>学生信息展示</h3>
                        <p>学生姓名:{{student.name}}</p>
                        <p>学生年龄:{{student.age}}</p>
                        <p>学生专业:{{student.major}}</p>
                    </div>
                    <button @click="count">统计学生人数</button>
                </div>
        `,
        data(){
            return{
                students:[
                    {
                        name:'tom',
                        age:20,
                        major:'Java'
                    },
                    {
                        name:'jack',
                        age:30,
                        major:'Web'
                    }
                ]
            }
        },
        methods: {
            count(){
                console.log(this.students.length)
                // 调用父组件中传递的函数
                this.$emit('total',this.students.length)
            }
        }
    }
    const vm = new Vue({
        el: '#app',
        data: {
            total:''
        },
        methods: {
            totalnumber(number){
                console.log("------------父组件中的函数被调用---------------")
                this.total = number
            }
        },
        components: {  //  注册组件
            student
        }
    })
</script>
</body>
</html>
